<?php /*a:3:{s:51:"G:\phpstudy_pro\WWW\tp\view\home\index\welcome.html";i:1602396862;s:51:"G:\phpstudy_pro\WWW\tp\view\home\common\static.html";i:1603931011;s:54:"G:\phpstudy_pro\WWW\tp\view\home\common\resources.html";i:1603609812;}*/ ?>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title><?php echo htmlentities($system['hotel_name']); ?>(多酒店版)</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/admin/css/font.css">
    <link rel="stylesheet" href="/static/admin/css/xadmin.css">
    <script src="/static/admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/admin/js/xadmin.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script src="/static/jquery.printarea.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <link href="/static/toastr/toastr.css" rel="stylesheet"/>
    <script src="/static/toastr/toastr.js"></script>

</head>
<input type="hidden" value="<?php echo htmlentities($voice['types']); ?>" id="voice">

<script>
    //语音播报
    function voice(name) {
        //判断语音是否开启
        if(<?php echo htmlentities($voice['status']); ?> === '0'){
            return false;
        }
        if($('#voice').val() === '思悦'){
            var audio= new Audio("/static/voice/siyue/"+name+".mp3");
        }else if($('#voice').val() === '若兮'){
            var audio= new Audio("/static/voice/ruoxi/"+name+".mp3");
        }else if($('#voice').val() === '艾琪'){
            var audio= new Audio("/static/voice/aiqi/"+name+".mp3");
        }else if($('#voice').val() === '艾美'){
            var audio= new Audio("/static/voice/aimei/"+name+".mp3");
        }else if($('#voice').val() === '艾悦'){
            var audio= new Audio("/static/voice/aiyue/"+name+".mp3");
        }else if($('#voice').val() === '青青'){
            var audio= new Audio("/static/voice/qingqing/"+name+".mp3");
        }else if($('#voice').val() === '翠姐'){
            var audio= new Audio("/static/voice/cuijie/"+name+".mp3");
        }else if($('#voice').val() === '姗姗'){
            var audio= new Audio("/static/voice/shanshan/"+name+".mp3");
        }else if($('#voice').val() === '小玥'){
            var audio= new Audio("/static/voice/xiaoyue/"+name+".mp3");
        }
        audio.play();//播放
    }
</script>
<!--<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet">-->
<!--<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">-->
<link href="/static/bootstrap3.0.css" rel="stylesheet" type="text/css"/>
<script src="/static/bootstrap/js/bootstrap.js"></script>
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">房间动态</a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid" id="app">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">

                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="contrller">
                                        <option>房间状态</option>
                                        <option>在住</option>
                                        <option>空闲</option>
                                        <option>维修</option></select>
                                </div>

                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="contrller">
                                        <option>房间类型</option>
                                        <option>支付宝</option>
                                        <option>微信</option>
                                        <option>货到付款</option></select>
                                </div>

                                <div class="layui-input-inline layui-show-xs-block">
                                    <input type="text" name="username" placeholder="请输入房间号" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                        <i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn layui-btn-normal" @click="emptys(move_id)" v-show='show'>
                                置空房间({{move_id}})
                            </button>
                            <button class="layui-btn layui-btn-normal" @click="handle()" v-show='show'>
                                办理入住({{move_id}})
                            </button>
                            <button class="layui-btn layui-btn-danger" @click="refund()" v-show='show'>
                                办理退房({{move_id}})
                            </button>
                            <button class="layui-btn layui-btn-danger"  v-show='show'>
                                换房({{move_id}})
                            </button>
                            <button class="layui-btn layui-btn-danger"  v-show='show'>
                                锁房({{move_id}})
                            </button>
                            <button class="layui-btn layui-btn-danger" @click="consume()" v-show='show'>
                                增加消费({{move_id}})
                            </button>
                            <button class="layui-btn layui-btn-danger" @click="report()" v-show='show'>
                                故障报修({{move_id}})
                            </button>
                        </div>
                        <hr class="layui-bg-black">

                            <div class="layui-row">

                                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1"
                                         style="border: 1px solid blue;padding: 8px;margin: 5px;cursor:pointer"
                                         v-for='item in list' @click="move(item.id)">

                                        <blockquote class="layui-elem-quote">{{item.room_num}}</blockquote>
                                        <h4>{{item.type_name}}</h4>
                                        <p>单价：{{item.price}}￥|{{item.storey}}</p>
            <!--                            <span class="layui-badge">赤</span>
                                        <span class="layui-badge layui-bg-orange">橙</span>
                                        <span class="layui-badge layui-bg-green">绿</span>
                                        <span class="layui-badge layui-bg-cyan">青</span>
                                        <span class="layui-badge layui-bg-blue">蓝</span>
                                        <span class="layui-badge layui-bg-black">黑</span>
                                        <span class="layui-badge layui-bg-gray">灰</span>-->
                                        <div v-if="item.status == '1'">
                                            <span class="layui-badge layui-bg-blue">空闲</span>
                                        </div>
                                        <div v-else-if="item.status == '2'">
                                            <span class="layui-badge layui-bg-cyan">{{item.guest_name}}</span>
                                        </div>
                                        <div v-else-if="item.status == '3'">
                                            <span class="layui-badge layui-bg-orange">{{item.guest_name}}vip</span>
                                        </div>
                                        <div v-else>
                                            <span class="layui-badge layui-bg-gray">维修</span>
                                        </div>
         <!--                               <span class="layui-badge">维修</span>
                                        <span class="layui-badge layui-bg-orange">VIP</span>

                                        <span class="layui-badge layui-bg-green">绿</span>
                                        <span class="layui-badge layui-bg-cyan">青</span>
                                        <span class="layui-badge layui-bg-black">黑</span>-->

                                </div>

                            </div>



                    </div>
                </div>
            </div>
        </div>
    </body>

<script>layui.use(['laydate', 'form'],
        function() {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });

</script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    vm=new Vue({
        el:'#app',
        data:{
            name:'bool',
            list:[],
            show:false,
            move_id:''
        },
        methods:{
            get_list:function(){
                _this = this;
                $.ajax({
                    type:"post",
                    url: "<?php echo url('home/index/welcome'); ?>",
                    data: {},
                    success: function(data){
                        console.log(data);
                        _this.list = data;
                    }});
            },
            move:function(id){
                this.show = true;
                this.move_id = id;
            },
            //办理入住
            handle:function(){
                window.location.href="/home/index/handle/id/"+this.move_id;
            },
            //置空房间
            emptys:function(id){
                $.ajax({
                    type:"post",
                    url: "<?php echo url('home/atrial/emptys'); ?>",
                    data: {
                        id:id,
                        status:1,
                        room_id:"no"
                    },
                    success: function(data){
                        console.log(data);
                        toastr.error(data.msg);
                        // 假设服务端ip为127.0.0.1
                        ws = new WebSocket("ws://127.0.0.1:8282");
                        ws.onopen = function() {

                            //右下弹出
                            layer.open({
                                type: 1
                                ,offset: 'rb'
                                ,content: '<div style="padding: 20px 80px;">重置房间成功</div>'
                                ,btn: '关闭全部'
                                ,btnAlign: 'c' //按钮居中
                                ,shade: 0 //不显示遮罩
                                ,anim: 2
                                ,yes: function(){
                                    layer.closeAll();
                                }
                            });

                            var audio= new Audio("/static/voice/2/welcome.mp3");

                            audio.play();//播放
                            ws.send('tom');

                        };
                        ws.onmessage = function(e) {
                            // alert("收到服务端的消息：" + e.data);
                            console.log("收到服务端的消息：" + e.data);
                        };
                        if(data.code == 100){
                            setTimeout(function () {
                                layer.closeAll();
                                parent.location.reload();
                            },4000);
                        }
                    }});
            },//退房管理
            refund:function(){
                _this = this;
                $.ajax({
                    type:"post",
                    url: "<?php echo url('home/atrial/refund'); ?>",
                    data: {
                        id:this.move_id,
           /*             status:1,
                        room_id:"no"*/
                    },
                    success: function(data){
                        console.log(data);
                        toastr.error(data.msg);
                        // 假设服务端ip为127.0.0.1
                        ws = new WebSocket("ws://127.0.0.1:8282");
                        ws.onopen = function() {

                            //右下弹出
                            layer.open({
                                type: 1
                                ,offset: 'rb'
                                ,content: '<div style="padding: 20px 80px;">退房成功</div>'
                                ,btn: '关闭全部'
                                ,btnAlign: 'c' //按钮居中
                                ,shade: 0 //不显示遮罩
                                ,anim: 2
                                ,yes: function(){
                                    layer.closeAll();
                                }
                            });

                            var audio= new Audio("/static/voice/2/welcome.mp3");

                            audio.play();//播放
                            ws.send('tom');

                        };
                        ws.onmessage = function(e) {
                            // alert("收到服务端的消息：" + e.data);
                            console.log("收到服务端的消息：" + e.data);
                        };
                        if(data.code == 100){
                            setTimeout(function () {
                                // window.location.href="/home/Invoice/refund_bill/id/"+_this.move_id;
                            },4000);
                        }
                    }});
            },
            consume:function(){
                window.location.href="/home/atrial/consume/id/"+this.move_id;
            },
            report:function () {
                _this = this;
                $.ajax({
                    type:"post",
                    url: "<?php echo url('home/atrial/report'); ?>",
                    data: {
                        id:this.move_id,
                    },
                    success: function(data){
                        console.log(data);
                        toastr.error(data.msg);
                        // 假设服务端ip为127.0.0.1
                        if(data.code == 100){
                            setTimeout(function () {
                                // window.location.href="/home/Invoice/refund_bill/id/"+_this.move_id;
                            },4000);
                        }
                    }});
            }
        },
        beforeMount:function(){
            console.log('-----3.挂载之前-----');
            this.get_list();
        }
    });

</script>

</html>